import { Collapse, InfiniteScroll, NavBar } from "antd-mobile";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import axios from "../../utils/index";
import { Cell } from "react-vant";
import { useNavigate } from "react-router-dom";
import Biao from "../../components/Biao";
function Index() {
  const naviagte = useNavigate();
  const { start, end, data } = useSelector((state) => state.home);
  const [list, setList] = useState([]);
  const [page, setpage] = useState(1);
  const getData = async () => {
    const resp = await axios.post("/trip/train", { start, end, page });
    console.log(resp.data);
    setpage(page + 1);
    setList(list.concat(resp.data.data));
  };
  useEffect(() => {
    getData();
  }, []);

  return (
    <div>
      <NavBar onClick={() => naviagte(-1)}>
        {start}--{end}
      </NavBar>
      <h4 style={{ textAlign: "conten" }}>{data}</h4>

      <Cell.Group>
        
        {list.map((v, i) => {
          return (
            <Biao
              key={i}
              v={v}
              onClick={() => naviagte("/xiangqing", { state: v })}
            ></Biao>
          );
        })}
      </Cell.Group>

      <InfiniteScroll loadMore={getData} hasMore={true} />
    </div>
  );
}

export default Index;
